<template>

<div>

    <el-form ref="form" :model="productDTO" label-width="120px">
        {{productDTO}}
        <el-form-item label="活动名称">
            <el-input v-model="productDTO.name"></el-input>
        </el-form-item>
        <el-form-item label="支持期数">
            <el-select v-model="productDTO.period" placeholder="请选择期数">
                <el-option label="3期" value="1"></el-option>
                <el-option label="6期" value="2"></el-option>
                <el-option label="12期" value="3"></el-option>
            </el-select>
        </el-form-item>
        <el-form-item label="支持期数">
            <el-radio-group v-model="productDTO.rateUnit" >
                <el-radio label="1" >年息</el-radio>
                <el-radio label="2" >月息</el-radio>
                <el-radio label="3" >日息</el-radio>
            </el-radio-group>
        </el-form-item>

        <el-form-item label="利率">
            <el-input-number v-model="productDTO.rate" :min="0" :max="10" :precision="2" :step="0.1" label="利率"></el-input-number>
        </el-form-item>
        <el-form-item label="产品种类">
            <el-radio-group v-model="productDTO.productType" >
               <el-radio v-for="(item,index) in productTypeList" :key="index" :label="item.value" >{{item.name}}</el-radio>
            </el-radio-group>
        </el-form-item>

        <el-form-item label="手续费">
            <el-input-number v-model="productDTO.commission" :min="0" :max="10" :precision="3" :step="0.1" label="手续费"></el-input-number>
        </el-form-item>
        <el-form-item label="还款方式">
            <el-radio-group v-model="productDTO.repaymentWay" >
                <el-radio v-for="(item,index) in repaymentWayList" :key="index" :label="item.value" >{{item.name}}</el-radio>

            </el-radio-group>
        </el-form-item>
        <el-form-item label="最小金额">
            <el-input-number v-model="productDTO.minMoney"  label="最小金额"></el-input-number>
        </el-form-item>
        <el-form-item label="最大金额">
            <el-input-number v-model="productDTO.maxMoney"  label="最大金额"></el-input-number>
        </el-form-item>

        <el-upload
                action="http://localhost:8086/api/product/uploadFastDFS"
                list-type="picture-card"
                :on-success="handleImageSuccess"
                :before-upload="beforeImagesUpload"
          >
            <i class="el-icon-plus"></i>
        </el-upload>


        <el-form-item>
            <el-button type="primary" @click="save">添加</el-button>
            <el-button>取消</el-button>
        </el-form-item>
    </el-form>
</div>

</template>
<script>

    export default {
        data() {
            return {
                productDTO: {
                    imagesList:[]
                },
                productTypeList:[],
                repaymentWayList:[],

            }
        },
        methods: {
            save() {
                //http://localhost:8086/api/product/save/
                axios.post("http://localhost:8086/api/product/save",this.productDTO).then(res =>{
                        debugger
                        if (res.data.flag){
                            this.$router.push("list")
                        }else {
                            this.$message.error(res.data.msg);
                        }
                    })
                },
            getProductType(){
                axios.get("http://localhost:8086/api/product/productTypeList").then(res =>{

                    if (res.data){
                        this.productTypeList=res.data
                    }
                })
            },
             getrepaymentWayList(){
                axios.get("http://localhost:8086/api/product/repaymentWayList").then(res =>{

                    if (res.data){
                        this.repaymentWayList=res.data
                    }
                })
            },
            handleImageSuccess(res,file){
                if (res){
                    let tbImages={
                        url :res.data
                    }
                    this.productDTO.imagesList.push(tbImages)
                }
            },
            beforeImagesUpload(file){
                const isLt2M = file.size / 1024 / 1024 < 21;

                if (!isLt2M) {
                    this.$message.error('上传头像图片大小不能超过 21MB!');
                }
                return  isLt2M;
            },



            },
        created() {
                this.getProductType();
                this.getrepaymentWayList();
        }
    }
</script>
<style>

</style>